<template>
  <div :class="item.config.class">
    <template v-if="item.config['model'] == 'appModel3'">
      <div class="shop-title-content flex-normal">
        <div class="title-content flex-center">        
          <span :prop-data="getModelItemConfig('title')" 
          class="title-txt" @click.stop="editModel(item['title'])"
          :style="{
            'font-family': setAttr(item['title'], 'fontFamily'),
            'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['title'], 'color'),
          }">{{ setAttr(item['title'], 'text')}}</span>
        </div>
      </div>
      <div class="shop-content" :style="{
        'background-color': item.configH5['backgroundColor'],
        'border-radius': $px2rem(`${item.configH5['borderRadius']}px`),
      }" @click.stop.prevent="editModel(item)">
        <div class="shop-logo-content">
          <img class="shop-logo" :src="getShopCover(shopInfo.imgUrlVos)"  crossorigin="anonymous">
        </div>
        <div class="shop-info-content flex-between">
          <div class="info-left">
            <div class="info-item">
              <span class="icon">&#xe60e;</span>
              <span class="info-txt ellipsis-1">{{shopInfo.shopName}}</span>
            </div>
            <div class="info-item flex-normal">
              <span class="icon">&#xe601;</span>
              <span class="info-txt ellipsis-1"> {{shopInfo.shopAddress}}</span>
            </div>
          </div>
          <div class="info-right info-btn flex-center">
            <span class="icon">&#xe969;</span>
            <span class="btn-txt">拨打电话</span>
          </div>
        </div>
      </div>
    </template>
    <template v-if="item.config['model'] == 'appModel5'">
      <div class="model-5-content">
        <div class="title-content flex-center">
          <span :prop-data="getModelItemConfig('title')" 
            class="title-txt" @click.stop="editModel(item['title'])"
            :style="{
              'font-family': setAttr(item['title'], 'fontFamily'),
              'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['title'], 'color'),
            }">{{ setAttr(item['title'], 'text')}}</span>
        </div>
        <div class="shop-content" :style="{
          'background-color': item.configH5['backgroundColor'],
          'border-radius': $px2rem(`${item.configH5['borderRadius']}px`),
        }" @click.stop.prevent="editModel(item)">
          <div class="shop-logo-content">
            <img class="shop-logo" :src="getShopCover(shopInfo.imgUrlVos)"  crossorigin="anonymous">
          </div>
          <div class="shop-info-content flex-column">
            <div class="info-top flex-between">
              <div class="info-item">
                <div class="info-label" :prop-data="getModelItemConfig('infoLabel')" 
                :style="{
                  'font-family': setAttr(item['infoLabel'], 'fontFamily'),
                  'font-size': item['infoLabel'] ? $px2rem(`${item['infoLabel'].configH5['fontSize']}px`) : '',
                  'color': setAttr(item['infoLabel'], 'color'),
                }" @click.stop="editModel(item['infoLabel'])">店铺名称:</div>
                <div class="info-txt ellipsis-1" :prop-data="getModelItemConfig('infoLabel')" 
                :style="{
                  'font-family': setAttr(item['infoDesc'], 'fontFamily'),
                  'font-size': item['infoDesc'] ? $px2rem(`${item['infoDesc'].configH5['fontSize']}px`) : '',
                  'color': setAttr(item['infoDesc'], 'color'),
                }" @click.stop="editModel(item['infoDesc'])">{{shopInfo.shopName}}</div>
              </div>
              <div class="info-item">
                <div class="info-label" :prop-data="getModelItemConfig('infoLabel')" 
                :style="{
                  'font-family': setAttr(item['infoLabel'], 'fontFamily'),
                  'font-size': item['infoLabel'] ? $px2rem(`${item['infoLabel'].configH5['fontSize']}px`) : '',
                  'color': setAttr(item['infoLabel'], 'color'),
                }" @click.stop="editModel(item['infoLabel'])">联系方式:</div>
                <div class="info-txt ellipsis-1" :prop-data="getModelItemConfig('infoLabel')" 
                :style="{
                  'font-family': setAttr(item['infoDesc'], 'fontFamily'),
                  'font-size': item['infoDesc'] ? $px2rem(`${item['infoDesc'].configH5['fontSize']}px`) : '',
                  'color': setAttr(item['infoDesc'], 'color'),
                }" @click.stop="editModel(item['infoDesc'])"> {{shopInfo.headPhone}}</div>
              </div>
            </div>
            <div class="info-bottom">
              <div class="info-label" :prop-data="getModelItemConfig('infoLabel')" 
                :style="{
                  'font-family': setAttr(item['infoLabel'], 'fontFamily'),
                  'font-size': item['infoLabel'] ? $px2rem(`${item['infoLabel'].configH5['fontSize']}px`) : '',
                  'color': setAttr(item['infoLabel'], 'color'),
                }" @click.stop="editModel(item['infoLabel'])">门店位置:</div>
              <div class="info-txt" :prop-data="getModelItemConfig('infoLabel')" 
                :style="{
                  'font-family': setAttr(item['infoDesc'], 'fontFamily'),
                  'font-size': item['infoDesc'] ? $px2rem(`${item['infoDesc'].configH5['fontSize']}px`) : '',
                  'color': setAttr(item['infoDesc'], 'color'),
                }" @click.stop="editModel(item['infoDesc'])">{{shopInfo.shopAddress}}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin'
import { shopModel } from '@/formgen/components/FormConfig/model-config'
import {getShopInfo} from '@/formgen/api/index'

export default {
  name: 'DShop',
  mixins: [mixin],
  data(){
    return {
      shopModel: JSON.parse(JSON.stringify(shopModel)),
      shopInfo: {}
    }
  },
  mounted(){
    let _self = this
    _self.getShopInfo()
  },
  methods: {
    getShopCover(list){
      if(!list || !list.length) return ''
      return list[0]['url']
    },
    setAttr(config, key){
      if(!config) return null
      return config.configH5[key]
    },
    getModelItemConfig(key){
      let _self = this
      let {model} = _self.item.config
      let config = _self.shopModel[model][key]
      _self.$set(_self.item, key, config)
    },
    editModel(item){
      this.$emit('edit-model', item)
    },
    getShopInfo(){
      let _self = this
      let {id = ''} = _self.$route.params
      getShopInfo(id).then(res => {
        _self.shopInfo = res.data
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .app-model-3.shop-model{
    position: relative;
    padding-top: rem(50);
    .shop-title-content{
      min-width: rem(310);
      height: rem(85);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #FECD8A;
      border-radius: rem(10);
      .title-content{
        position: relative;
        flex: 1;
        &::after, &::before{
          content: '';
          position: absolute;
          width: rem(14);
          height: rem(14);
          top: 50%;
          transform: translateY(-50%);
          background-color: #fff;
          border-radius: 50%;
        }
        &::before{
          left: rem(50);
        }
        &::after{
          right: rem(50);
        }
      }
    }
    .shop-content{
      padding: rem(70) rem(55) rem(40);
      .shop-logo-content{
        height: rem(300);
        .shop-logo{
          display: block;
          width: 100%;  
          height: 100%; 
          object-fit: contain;  
        }        
      }
      .shop-info-content{
        padding-top: rem(30);
        .info-left{
          margin-bottom: rem(30);
          .icon{
            font-size: rem(30);
            margin-right: rem(8);
          }
          .info-item{
            margin-bottom: rem(20);
            font-size: rem(24);
            color: #333;
            &:last-child{
              margin-bottom: 0;
            }
            .info-txt{
              width: rem(300);
            }
          }
        }
        .info-btn{
          min-width: rem(200);
          height: rem(70);
          color: #333;
          font-size: rem(28);
          border-radius: rem(34);
          border: rem(1) solid #333333;
        }
      }
    }
  }
  
  .app-model-5.shop-model{
    .model-5-content{
      border-radius: rem(10);
      box-shadow: rem(3) 0 rem(7) 0 #1863B2;
      .title-content{
        height: rem(137);
        background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
        background-size: contain;
        font-weight: bold;
      }
      .package-desc{
        line-height: 2.4;
        padding: 0 rem(30);
      }
    }
    .shop-content{
      padding: rem(30);
      .shop-logo-content{
        height: rem(300);
        border-radius: rem(10);
        overflow: hidden;
        .shop-logo{
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;  
        }        
      }
      .shop-info-content{
        padding-top: rem(30);
        .info-txt{
          margin-top: rem(10);
        }
        .info-label{
          font-weight: bold;
        }
        .info-item{
          width: 50%;
        }
        .info-bottom{
          margin-top: rem(20);
        }
      }
    }
  }
</style>
